import React, { useEffect, useState } from 'react'
import { Descriptions, Card, Row, Col, List } from 'antd';
import axios from 'axios';
import _ from 'lodash'


export default function Visitor() {
  const [list, setList] = useState([])

  useEffect(() => {
    axios.get('/news?publishState=2&_expand=category').then(res => {
      console.log(Object.entries(_.groupBy(res.data, item => item.category.title)))
      setList(Object.entries(_.groupBy(res.data, item => item.category.title)))
    })
  }, [])


  return (
    <div style={{ padding: '30px' }}>
      <Descriptions title="全球新闻(游客系统)" style={{ padding: '20px' }}>
      </Descriptions>
      <Row gutter={[16, 16]}>
        {list.map(item =>
          <Col key={item[0]} span={8}>
            <Card hoverable title={item[0]} bordered={false}>
              <List
                pagination={{ pageSize: 3 }}
                size="small"
                bordered
                dataSource={item[1]}
                renderItem={(item) => <List.Item><a href={`#/detail/${item.id}`} >{item.title}</a></List.Item>}
              />
            </Card>
          </Col>
        )}
      </Row>
    </div>
  )
}
